<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16110100624</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Cache-Control" content="max-age=180">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <meta http-equiv="x-dns-prefetch-control" content="on">

    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/lunbo.css">
    <script src="js/common.js"></script>
    <script src="js/lunbo.js"></script>
    <script src="js/index.js"></script>
    <style>
		.show{
			display: block;
		}
    </style>
    <script>
        window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {//判断是屏幕旋转还是resize
            function c() {
                var d = document.documentElement;//获取html元素
                var cw = d.clientWidth || 750;
                d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
            }
            c();
            return c;
        })(), false);
        
        
        //选项卡
        var b1 = document.getElementById("box1-b-r");
        var span = b1.getElementsByTagName("span");
        var bigbox = document.getElementsByName("bigbox");
        
        for( var i = 0; i<span.length ; i++){
        	span[i].index = i;
        	span[i].onclick = function(){
        		for( var j = 0; j<bigbox.length ; j++){
        			bigbox[j].style.display="none";
        			span[j].className="";
        		}
        		bigbox[this.index].style.display="block";

        	}
        }
    </script>



</head>
<body>
<!--h5标签,语义化加强。用法和div相同，可以多个存在，在不是id标签的情况下-->
    <!--<header id="header">-->

    <!--</header>-->
    <!--<nav id="nav"></nav>-->
    <!--<div id="slide"></div>-->
    <!--<main id="main"></main>-->
    <!--&lt;!&ndash;section里包含article&ndash;&gt;-->
    <!--<section id="xg"></section>-->
    <!--<aside></aside>-->
    <!--<footer id="footer"></footer>-->
<div id="box1">
    <img src="images/yuyin.png" alt="" class="box1-img">
    <input type="text" id="input1" placeholder="给你推荐Wolves"/>
    <img src="images/playing.png" alt="" class="box1-img" style="margin-left: 0.3em;">
    <div id="box1-below">
        <div class="box1-b-r fl"><span>个性推荐</span></div>
        <div class="box1-b-r fl"><span>主播电台</span></div>
    </div>
</div>

<!--<div id="box2">-->
	
	
	<!--个性推荐-->
<div class="bigbox  show">	
    <div class="container">
        <div class="wrap" style="left: -1000px;">
            <img src="images/music-5.jpg" alt="5">
            <img src="images/music-1.jpg" alt="1">
            <img src="images/music-2.jpg" alt="2">
            <img src="images/music-3.jpeg" alt="3">
            <img src="images/music-4.jpg" alt="4">
            <img src="images/music-5.jpg" alt="5">
            <img src="images/music-1.jpg" alt="1">
        </div>
        <div class="buttons">
            <span class="on">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <a href="javascript:;" class="arrow arrow_left">&lt;</a>
        <a href="javascript:;" class="arrow arrow_right">&gt;</a>
    </div>
<!--</div>-->
<script src="js/lunbo.js"></script>
<div id="box3">
    <div class="fl box3-one">
        <div class="box3-o-1">
            <img src="images/1-FM.png" alt="">
        </div>

        <p><a href="FM.html">私人FM </a></p>
    </div>
    <div class="fl box3-one">
        <div  class="box3-o-1 fl">
            <img src="images/1-calendar.png" alt="">
        </div>

        <p>每日推荐</p>
    </div>
    <div class="fl box3-one">
        <div  class="box3-o-1 fl">
            <img src="images/1-music.png" alt="">
        </div>

        <p>歌单</p>
    </div>
    <div class="fl box3-one">
        <div class="box3-o-1 fl">
            <img src="images/1-list.png" alt="">
        </div>

        <p>排行榜</p>
    </div>
</div>
<div style="clear: both"></div>
<div id="box4">
    <div id="box4-title">
        <span class="fl box4-title">推荐歌单</span>
        <img src="images/right.png" alt="" class="fl box4-img">
    </div>
    <ul class="mlist">
        <!--<li>-->
            <!--<images src="images/1-list.png" alt="">-->
            <!--&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;-->
            <!--<p>随意的内容111111111</p>-->
            <!--&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;-->
        <!--</li>-->
        <!--<li>-->
            <!--<images src="images/1-list.png" alt="">-->
            <!--&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;-->
            <!--<p>随意的内容</p>-->
            <!--&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;-->
        <!--</li>-->
        <!--<li>-->
            <!--<images src="images/1-list.png" alt="">-->
            <!--&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;-->
            <!--<p>随意的内容</p>-->
            <!--&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;-->
        <!--</li>-->
        <!--<li>-->
            <!--<images src="images/1-list.png" alt="">-->
            <!--&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;-->
            <!--<p>随意的内容</p>-->
            <!--&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;-->
        <!--</li>-->
    </ul>
</div>
<div style="clear: both"></div>
<div id="box5">
    <img src="images/1-disk.png" alt="" id="box5-img" class="fl">
    <div id="box5-title" class="fl">
        <span class="fl box4-title">LOOK直播</span>
        <img src="images/right.png" alt="" class="fl box4-img">
    </div>
    <ul class="mlist-1">
        <li>
            <img src="images/pic-7.JPG" alt="">
            <p>随意的内容</p>
        </li>
        <li>
            <img src="images/pic-8.JPG" alt="">
            <p>随意的内容</p>
        </li>
        <li>
            <img src="images/pic-9.JPG" alt="">
            <p>随意的内容</p>
        </li>
    </ul>
</div>
<div style="clear: both"></div>
<div id="box6">
    <img src="images/1-disk.png" alt="" id="box6-img" class="fl">
    <div id="box6-title" class="fl">
        <span class="fl box4-title">LOOK直播</span>
        <img src="images/right.png" alt="" class="fl box4-img">
    </div>
    <ul class="mlist-1">
        <li>
            <img src="images/two-6.JPG" alt="">
            <p>随意的内容</p>
        </li>
        <li>
            <img src="images/two-5.JPG" alt="">
            <p>随意的内容</p>
        </li>
        <li>
            <img src="images/two-4.JPG" alt="">
            <p>随意的内容</p>
        </li>
    </ul>
</div>
<div style="clear: both;"></div>
<footer id="footer">
    <div class="footer-div fl">
        <img src="images/footer-1.png" alt="">
        <p>发现</p>
    </div>
    <div class="footer-div fl">
        <img src="images/footer-2.png" alt="">
        <p>视频</p>
    </div>
    <div class="footer-div fl">
        <a href="me.html">
            <img src="images/footer-3.png" alt="">
        </a>

        <p>我的</p>
    </div>
    <div class="footer-div fl">
        <img src="images/footer-4.png" alt="">
        <p>朋友</p>
    </div>
    <div class="footer-div fl">

        <a href="account.html">
            <img src="images/footer-5.png" alt="">
        </a>

        <p>账号</p>
    </div>
<!--</div>-->
1111


<!--主播电台-->

<!--<div class="bigbox ">	-->
    <!--<div class="container">-->
        <!--<div class="wrap" style="left: -1000px;">-->
            <!--<img src="images/music-5.jpg" alt="5">-->
            <!--<img src="images/music-1.jpg" alt="1">-->
            <!--<img src="images/music-2.jpg" alt="2">-->
            <!--<img src="images/music-3.jpeg" alt="3">-->
            <!--<img src="images/music-4.jpg" alt="4">-->
            <!--<img src="images/music-5.jpg" alt="5">-->
            <!--<img src="images/music-1.jpg" alt="1">-->
        <!--</div>-->
        <!--<div class="buttons">-->
            <!--<span class="on">1</span>-->
            <!--<span>2</span>-->
            <!--<span>3</span>-->
            <!--<span>4</span>-->
            <!--<span>5</span>-->
        <!--</div>-->
        <!--<a href="javascript:;" class="arrow arrow_left">&lt;</a>-->
        <!--<a href="javascript:;" class="arrow arrow_right">&gt;</a>-->
    <!--</div>-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<script src="js/lunbo.js"></script>-->
<!--<div id="box3">-->
    <!--<div class="fl box3-one">-->
        <!--<div class="box3-o-1">-->
            <!--<img src="images/1-FM.png" alt="">-->
        <!--</div>-->

        <!--<p><a href="FM.html">私人FM </a></p>-->
    <!--</div>-->
    <!--<div class="fl box3-one">-->
        <!--<div  class="box3-o-1 fl">-->
            <!--<img src="images/1-calendar.png" alt="">-->
        <!--</div>-->

        <!--<p>每日推荐</p>-->
    <!--</div>-->
    <!--<div class="fl box3-one">-->
        <!--<div  class="box3-o-1 fl">-->
            <!--<img src="images/1-music.png" alt="">-->
        <!--</div>-->

        <!--<p>歌单</p>-->
    <!--</div>-->
    <!--<div class="fl box3-one">-->
        <!--<div class="box3-o-1 fl">-->
            <!--<img src="images/1-list.png" alt="">-->
        <!--</div>-->

        <!--<p>排行榜</p>-->
    <!--</div>-->
<!--</div>-->
<!--<div style="clear: both"></div>-->
<!--<div id="box4">-->
    <!--<div id="box4-title">-->
        <!--<span class="fl box4-title">推荐歌单</span>-->
        <!--<img src="images/right.png" alt="" class="fl box4-img">-->
    <!--</div>-->
    <!--<ul class="mlist">-->
        <!--&lt;!&ndash;<li>&ndash;&gt;-->
            <!--&lt;!&ndash;<images src="images/1-list.png" alt="">&ndash;&gt;-->
            <!--&lt;!&ndash;&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;&ndash;&gt;-->
            <!--&lt;!&ndash;<p>随意的内容111111111</p>&ndash;&gt;-->
            <!--&lt;!&ndash;&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;</li>&ndash;&gt;-->
        <!--&lt;!&ndash;<li>&ndash;&gt;-->
            <!--&lt;!&ndash;<images src="images/1-list.png" alt="">&ndash;&gt;-->
            <!--&lt;!&ndash;&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;&ndash;&gt;-->
            <!--&lt;!&ndash;<p>随意的内容</p>&ndash;&gt;-->
            <!--&lt;!&ndash;&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;</li>&ndash;&gt;-->
        <!--&lt;!&ndash;<li>&ndash;&gt;-->
            <!--&lt;!&ndash;<images src="images/1-list.png" alt="">&ndash;&gt;-->
            <!--&lt;!&ndash;&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;&ndash;&gt;-->
            <!--&lt;!&ndash;<p>随意的内容</p>&ndash;&gt;-->
            <!--&lt;!&ndash;&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;</li>&ndash;&gt;-->
        <!--&lt;!&ndash;<li>&ndash;&gt;-->
            <!--&lt;!&ndash;<images src="images/1-list.png" alt="">&ndash;&gt;-->
            <!--&lt;!&ndash;&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;&ndash;&gt;-->
            <!--&lt;!&ndash;<p>随意的内容</p>&ndash;&gt;-->
            <!--&lt;!&ndash;&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;</li>&ndash;&gt;-->
    <!--</ul>-->
<!--</div>-->
<!--<div style="clear: both"></div>-->
<!--<div id="box5">-->
    <!--<img src="images/1-disk.png" alt="" id="box5-img" class="fl">-->
    <!--<div id="box5-title" class="fl">-->
        <!--<span class="fl box4-title">LOOK直播</span>-->
        <!--<img src="images/right.png" alt="" class="fl box4-img">-->
    <!--</div>-->
    <!--<ul class="mlist-1">-->
        <!--<li>-->
            <!--<img src="images/pic-7.JPG" alt="">-->
            <!--<p>随意的内容</p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="images/pic-8.JPG" alt="">-->
            <!--<p>随意的内容</p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="images/pic-9.JPG" alt="">-->
            <!--<p>随意的内容</p>-->
        <!--</li>-->
    <!--</ul>-->
<!--</div>-->
<!--<div style="clear: both"></div>-->
<!--<div id="box6">-->
    <!--<img src="images/1-disk.png" alt="" id="box6-img" class="fl">-->
    <!--<div id="box6-title" class="fl">-->
        <!--<span class="fl box4-title">LOOK直播</span>-->
        <!--<img src="images/right.png" alt="" class="fl box4-img">-->
    <!--</div>-->
    <!--<ul class="mlist-1">-->
        <!--<li>-->
            <!--<img src="images/two-6.JPG" alt="">-->
            <!--<p>随意的内容</p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="images/two-5.JPG" alt="">-->
            <!--<p>随意的内容</p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="images/two-4.JPG" alt="">-->
            <!--<p>随意的内容</p>-->
        <!--</li>-->
    <!--</ul>-->
<!--</div>-->
<!--<div style="clear: both;"></div>-->
<!--<footer id="footer">-->
    <!--<div class="footer-div fl">-->
        <!--<img src="images/footer-1.png" alt="">-->
        <!--<p>发现</p>-->
    <!--</div>-->
    <!--<div class="footer-div fl">-->
        <!--<img src="images/footer-2.png" alt="">-->
        <!--<p>视频</p>-->
    <!--</div>-->
    <!--<div class="footer-div fl">-->
        <!--<a href="me.html">-->
            <!--<img src="images/footer-3.png" alt="">-->
        <!--</a>-->

        <!--<p>我的</p>-->
    <!--</div>-->
    <!--<div class="footer-div fl">-->
        <!--<img src="images/footer-4.png" alt="">-->
        <!--<p>朋友</p>-->
    <!--</div>-->
    <!--<div class="footer-div fl">-->

        <!--<a href="account.html">-->
            <!--<img src="images/footer-5.png" alt="">-->
        <!--</a>-->

        <!--<p>账号</p>-->
    <!--</div>-->
<!--</div>-->
</footer>
</body>
</html>